Fiche HTML

Hyper Text Markup Language 1989

Langage hypertexte à balises.

Format ouvert, standardisé, portable.

Le validateur du consortium W3C permet de vérifier si un code HTML est conforme aux spécifications. http://validator.w3.org/

Création/édition

Le fichier doit avoir l’extension .htm ou .html.

Il peut être édité avec notepad (le Bloc-notes des Accessoires) ou notepad++ (un bloc-notes évolué)

Affichage

Une fois créé, le fichier HTML peut être affiché à l’aide d’un navigateur (menu ouvrir du menu fichier, ou double-clic (si l’association a été faite au préalable)

Les balises

Le texte à présenter est encadré par une balise début et une balise fin (identifiée par le caractère antislash : /). Les balises portent un nom sans espace à l’intérieur.

<nombalise> texte à présenter </nombalise>

Les balises vont par paire mais il en existe des orphelines (sans balise terminale).

Pour saisir un commentaire, l’encadrer par < ! et >

Structure d'un élément HTML

Composant	Description	Exemple: lien internet
<	Balise ouvrante de la balise d'ouverture	<
ELEMENT	Nom de l'élément	A
Attribut	Propriété de cet élément. Obligatoire pour certains	href
Valeur	Valeur de l'attribut précédée d'un signe égal et entourée de guillemets	="http://eric.muyor.free.fr"
>	Balise fermante de la balise d'ouverture	>
Contenu	Contenu apparaissant dans le navigateur	Site web éric Muyor
</ELEMENT>	Balise de fermeture	</A>

Le cadrage du langage HTML au bac STG GSI

Tiré du Mémentos bac STG épreuve de spécialité en GSI.

Inspection générale de l’Éducation nationale / Direction générale de l’Enseignement scolaire

Document:	<html> <head> <title> titre du document </title> </head> <body> corps du document </body> </html>
Lien hypertexte:	<a href= "URL"> texte </a>
Tableau :	<table> [<tr> [<td> texte </td>]* </tr>]* </table>
Formulaire :	<form method="get" \| "post" action= "NURL"> [zone de saisie]* </form>
Zone de saisie :	<input type="type de zone de saisie" name="nom de la zone" value="valeur" >
Type de zone de saisie:	text \| radio \| checkbox \| button \| submit \| reset
Liste déroulante :	<select name="nom" size="taille"> [<option [selected] Value="valeur">texte </option>]* </select>
Commentaire :	< !--commentaire -- !>

Il faut comprendre et pouvoir interpréter ces éléments le jour du bac!

Syntaxe du langage html

La référence en français (spécification HTML 4.01)

http://www.la-grange.net/w3c/html4.01/cover.html

Liens utiles

Comment écrivez-vous votre code (X)HTML ? Expliquez vos choix de syntaxe HTML

http://xhtml.developpez.com/actu/49426/Comment-ecrivez-vous-votre-code-X-HTML-Expliquez-vos-choix-de-syntaxe-HTML/

Premiers pas en HTML

http://www.linux-france.org/article/web/docs/basic-html/html/basic-html.html#toc3

http://www.linux-france.org/article/web/docs/basic-html/html/basic-html-7.html

Premiers pas en HTML: Les balises avancées

http://www.linux-france.org/article/web/docs/basic-html/html/basic-html-6.html#ss6.4

Hypertext Markup Language – Wikipédia

http://fr.wikipedia.org/wiki/Hypertext_Markup_Language

Le langage XML - La syntaxe du XML

http://www.lehtml.com/xml/syntaxe.html

Balises	Description	Exemple de Code html
<html>	Document de type html	<html> <head> <title>Titre de la page HTML</title> </head> <body>Contenu de la page HTML</body> </html>
<head>	En-tête du document
<title>	Titre du document
<body>	Corps du document


<b>	Mise en gras (bold)
<i>	Mise en italique (italic)
<br />	Saut à la ligne (break) – balise orpheline


<h1>	Titre de niveau 1 (header)
<h2>	Titre de niveau 2
<h3>	Titre de niveau 3
<h4>	Titre de niveau 4
<h5>	Titre de niveau 5
<h6>	Titre de niveau 6
<i>	Mise en italique (italic)
<hr />	Ligne horizontale – balise orpheline
<u>	Soulignement du texte (underline)

Caractères spéciaux

	HTML considère une suite d’espaces (ou de tabulations ou de sauts de lignes) comme un seul espace. Pour y remédier il faut utiliser   autant de fois que nécessaire..
é	é
è	ê
à	à
ê	ê
ï	ï
ù	ù
"	"
<	<
>	>

Listes

<ul>	Liste non ordonnée (unorderd list)	Type="1" – chiffres arabes Type="a" – lettres minuscules Type="A" – lettres majuscules Type="i" – chiffres romains en minuscules Type="I" – chiffres romains en majuscules
<ol>	Liste ordonnée Start ="1" Value = "1"
<li>	Élément de liste	Type="disc" – rond plein Type="square" – carré plein Type="circle" – cercle vide

<DL>	Liste de définition
<DT>	Terme à définir
<DD>	Définition

Tableaux

<CAPTION>	Titre du tableau
<TABLE>	Début du tableau	Attributs: border, frame, rules, summary
<TH>	En-tête de colonne
<TR>	Nouvelle ligne
<TD>	cellule	Attributs : cellspacing, cellpading, valign, align

Fusion des cellules d'une même ligne : attribut colspan

Fusion des cellules d'une même colonne : attribut rowspan

Les attributs des balises html

Certaines balises nécessitent des attributs précisant leurs caractéristiques.


<img>	Insertion d’une image
src	src = ‘’URLimage’’	Emplacement de l’image. Attribut obligatoire
width	Width = NbPixels	Largeur de l’image en nombre de pixels
height	Height = NbPixels

Les hyperliens

		attribut
<a>	Ancre (anchor)	href=’’URL’’ ou ‘’#NomAncre’’
		name
		Target = ‘’_self’’	Cible s’affichant dans le même cadre que celui du lien (par défaut)
		Target = ‘’_top’’	Cible s’affichant dans toute la fenêtre du navigateur et les cadres disparaissent
		Target = ‘’_blank’’	Cible s’affichant dans une nouvelle fenêtre du navigateur
		Target = ‘’NomCadre’’	Cible s’affichant dans le cadre qui s’appelle NomCadre

Liens utiles

Pourquoi utiliser des formats ouverts? :: openformats.org

Pour les formats ouverts !

transfert.net./ Les vices cachés des .doc

Des fonctionnalités de Microsoft Word permettent l’injection de virus et la fuite d’informations

[ Rése@u74 : Formats de fichiers : attention danger ! ]

Reseaux74, CRI Pratique, les publications du Centre de Ressources Informatiques de Haute-Savoie...

[ Rése@u74 : Formats de fichiers : Attention danger ! ]

Reseaux74, CRI Pratique, les publications du Centre de Ressources Informatiques de Haute-Savoie...

Format ouvert - Wikipédia

Format de données - Wikipédia

Portable Document Format - Wikipédia

Extensible HyperText Markup Language - Wikipédia

Hypertext Markup Language - Wikipédia

Feuilles de style en cascade - Wikipédia

Formats de fichiers

Le validateur HTML du WDG en mode chargement de fichier

Le validateur du WDG contrôle la justesse syntaxique du code HTML afin d'aider à produire des pages Web plus accessibles.

Le validateur HTML du WDG en entrée directe

Le validateur du WDG contrôle l'exactitude syntaxique du code HTML afin d'aider à produire des pages Web plus accessibles.

Validateur Multipages pour une validation de site XHTML

Validez votre site Internet en entier grâce à l'outil de validation multipages.

Tutoriels

Développement Web : "Zone Grand Débutant" par Guillaume Rossolini (Tutoriels Web / SEO / PHP) (Blog)

http://g-rossolini.developpez.com/tutoriels/web-debutant

Les formulaires

http://g-rossolini.developpez.com/tutoriels/php/les-formulaires-et-php5/

http://xhtml.developpez.com/cours/

cours de mise en page au moyen de la balise HTML <div>.

http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

les bonnes pratiques de développement en HTML.

http://a-pellegrini.developpez.com/tutoriels/coding-style/#LIII.3

Adrien Pellegrini vous présente le XHTML (une évolution de HTML) en long et en large.

http://a-pellegrini.developpez.com/tutoriels/xhtml/

http://a-pellegrini.developpez.com/tutoriels/coding-style/